<template>
   <div class="update-model">
      <div class="model">
         <vue-cropper
            ref="cropper2"
            :img="example2.img"
            :outputSize="example2.size"
            :outputType="example2.outputType"
            :info="example2.info"
            :canScale="example2.canScale"
            :autoCrop="example2.autoCrop"
            :autoCropWidth="example2.autoCropWidth"
            :autoCropHeight="example2.autoCropHeight"
            :fixed="example2.fixed"
            :fixedNumber="example2.fixedNumber"
            :original="example2.original"
            :full="example2.full"
         ></vue-cropper>
         <p class="title">图片可以拖动、滚轮放大缩小，选取框任意拖动、放大缩小</p>
         <div>
            <div class="update-label" v-if="!example2.img">
               <label for="update">点击上传文件</label>
            </div>
            <div class="update-btn">
               <label for="update">选择图片</label>
               <p class="btn">
                  <el-button type="success"
                             @click="_submitHeader"
                  >上传头像
                  </el-button>
               </p>
               <p class="btn">
                  <el-button type="info"
                             @click="_cancel"
                  >取消上传
                  </el-button>
               </p>
            </div>
            <input v-show="false" type="file" id="update" @change="_upimg($event)"/>
         </div>
      </div>
   </div>
</template>

<script>
   import vueCropper from 'vue-cropper'
   import {mapMutations} from 'vuex'

   export default {
      name: 'update-model',
      data() {
         // http://ofyaji162.bkt.clouddn.com/bg1.jpg
         return {
            example2: {
               img: '',
               info: true,
               size: 1,
               outputType: 'jpeg',
               canScale: true,
               autoCrop: true,
               // 只有自动截图开启 宽度高度才生效
               autoCropWidth: 200,
               autoCropHeight: 250,
               // 开启宽度和高度比例
               fixed: true,
               fixedNumber: [4, 3],
               original: false,
               full: true
            },
            img: '',
            SuffixName: '',
            imgPath: '',
            imgName: '',
            file: ''
         }
      },
      props: {
         userName: {
            type: String,
            default() {
               return ''
            }
         }
      },
      mounted() {
      },
      methods: {
         _body() {
            let body = document.querySelector('body')
            body.style.overflow = 'hidden'
         },
         _upimg(e) {
            var file = e.target.files[0]
            let SuffixName = e.target.value
            this.imgName = e.target.files[0].name
            this.imgPath = e.target.value
            this.file = file
            console.log(Boolean(file))
            if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
               alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
               return false
            }
            var reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = (e) => {
               console.log(this.file)
               this.SuffixName = SuffixName.slice(SuffixName.lastIndexOf('.'), SuffixName.length)
               this.example2.img = e.target.result
               console.log(this.$refs.cropper2)
            }
         },
         async _submitHeader() {
            let data = await this._dataImg()
            let file = this.file
            let name = file.name.split('.')
            let fileName = this.userName + '.' + Date.now() + '.' + name[name.length - 1]
            console.log(fileName)
            let param = new FormData()
            param.append('file', data, fileName)
            let config = {
               headers: {'Content-Type': 'multipart/form-data'}
            }
            this.$emit('updateloading', true)
            this.$axios.post('/apis/update', param, config).then(res => {
               console.log(res)
               if (res.data.success) {
                  let user_id = window.sessionStorage.getItem('user_id')
                  this.$emit('updateloading', false)
                  this.$emit("cancel", true)
                  this.settUser(user_id)
               }
            })
         },
         _dataImg() {
            return new Promise(resolve => {
               this.$refs.cropper2.getCropBlob(async (data) => {
                  resolve(data)
               })
            })
         },
         _cancel() {
            this.$emit("cancel", true)
         },
         ...mapMutations({
            settUser: 'getUser'
         })
      },
      components: {
         vueCropper
      }
   }
</script>

<style scoped lang="stylus">
   .update-model
      height 450px
      .model
         .title
            margin 10px
            text-align center
            color red
            font-size 14px
         height 330px
         width 500px
         position relative
         .update-btn
            display flex
            justify-content space-between
            margin-top 20px
            box-sizing border-box
            padding 10px 40px
            label
               cursor pointer
               text-align center
               line-height 40px
               background #dadfdf
               border-radius 10px
               height 40px
               width 98px
         .update-label
            label
               color white
               font-size 30px
               cursor pointer
            display flex
            justify-content center
            align-items center
            top 0
            right 0
            left 0
            bottom 0
            background rgba(0, 0, 0, 0.7)
            position absolute
</style>
